<template>
  <div class="app-container">
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="关于我" name="aboutMe">
        <span slot="label">
          <i class="el-icon-star-on"></i> 关于我
        </span>
        <el-form v-loading="Loading" style="margin-left: 20px;" label-position="left" :model="form" label-width="100px" ref="form">
          <el-form-item label="头像">
            <div style="width:100px;height:100px;cursor: pointer;" @click="showCutter=true">
              <el-avatar :src="form.avatarUrl" shape="square" icon="el-icon-plus" :size="100"></el-avatar>
            </div>
          </el-form-item>

          <el-form-item label="昵称">
            <el-input v-model="form.nickName" style="width: 400px"></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="form.gender" size="small">
              <el-radio-button label="1" border>男</el-radio-button>
              <el-radio-button label="2" border>女</el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="手机号">
            <el-input v-model="form.mobile" style="width: 400px"></el-input>
          </el-form-item>

          <el-form-item label="邮箱">
            <el-input v-model="form.email" style="width: 400px"></el-input>
          </el-form-item>

          <el-form-item label="QQ号">
            <el-input v-model="form.qqNumber" style="width: 400px"></el-input>
          </el-form-item>

          <el-form-item label="Github">
            <el-input v-model="form.github" style="width: 400px"></el-input>
          </el-form-item>

          <el-form-item label="Gitee">
            <el-input v-model="form.gitee" style="width: 400px"></el-input>
          </el-form-item>

          <el-form-item label="微信号">
            <el-input v-model="form.weChat" style="width: 400px"></el-input>
          </el-form-item>

          <el-form-item label="职业">
            <el-input v-model="form.occupation" style="width: 400px"></el-input>
          </el-form-item>

          <el-form-item label="简介">
            <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" placeholder="请输入内容" style="width: 400px" v-model="form.summary"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('changeAdminForm')">保 存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="修改密码" name="four">
        <span slot="label">
          <i class="el-icon-edit"></i> 修改密码
        </span>
        <el-form :rules="rules" style="margin-left: 20px;" label-position="left" :model="changePwdForm" label-width="80px" ref="changePwdForm">
          <el-form-item label="旧密码" prop="oldPwd">
            <el-input type="password" v-model="changePwdForm.oldPwd" style="width: 400px"></el-input>
          </el-form-item>

          <el-form-item label="新密码" prop="newPwd1">
            <el-input type="password" v-model="changePwdForm.newPwd1" style="width: 400px"></el-input>
          </el-form-item>

          <el-form-item label="重复输入" prop="newPwd2">
            <el-input type="password" v-model="changePwdForm.newPwd2" style="width: 400px"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('changePwdForm')">保 存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <avatar-cutter style="z-index:2001" v-if="showCutter" @cancel="showCutter = false" return-type="file" @enter="uploadAvatar"></avatar-cutter>
  </div>
</template>
<script>
import { getMe, editMe, changePwd } from "@/api/aboutMe";
import AvatarCutter from "../../components/avatar-cutter/avatar-cutter";
import { getToken } from "@/utils/auth";
import { uploadFile, addPicture } from "@/api/picture";
export default {
  components: {
    AvatarCutter,
  },
  data() {
    return {
      Loading: true,
      imgUrl: require("@/assets/upload.png"),
      VUE_APP_IMAGE_URL: process.env.VUE_APP_IMAGE_URL,
      avatarSortUid: "6f041dff94ff28c9f8d4bef882844003", //头像相册分类得uid
      activeName: "aboutMe",
      showCutter: false, // 是否显示头像裁剪组件
      changePwdForm: {},
      form: {},
      //定义规则
      rules: {
        oldPwd: [
          { required: true, message: "请输入原来密码", trigger: "blur" },
        ],
        newPwd1: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 5, message: "密码长度需要大于等于 5 个字符", trigger: "blur" },
        ],
        newPwd2: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          { min: 5, message: "密码长度需要大于等于 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    // this.loadingInstance = Loading.service({
    //   fullscreen: true, lock: true, text: '正在努力加载中...', background: 'rgba(0, 0, 0, 0.7)'
    // });
    this.getMeInfo();
  },
  methods: {
    getMeInfo() {
      this.Loading = true;
      var getMeParams = new URLSearchParams();
      getMe(getMeParams).then((response) => {
          this.form = response.data;
          // this.loadingInstance.close();
          this.Loading = false;
      });
    },
    uploadAvatar(src) {
      var formData = new FormData();
      formData.append("multipartFile", src);
      formData.append("userUid", this.$store.getters.userUid);
      formData.append("sortName", "admin");
      this.$store.dispatch('app/setLoading', true);
      uploadFile(formData).then((response) => {
        //上传图片file
          let picture = {};
          picture.fileUid = response.data.uid;
          picture.pictureSortUid = this.avatarSortUid;
          picture.picName = response.data.picName;
          addPicture(picture).then((resp) => {
            //添加到分类中，添加到数据库
              this.form.avatarUrl = response.data.picUrl;
              this.form.avatar = response.data.uid;
              this.showCutter = false;
          });
      });
    },
    cancel(type) {
      this.$refs[type].resetFields();
    },
    submitForm(type) {
      switch (type) {
        // 1、改变用户信息
        case "changeAdminForm":
          {
            this.$store.dispatch('app/setLoading', true);
            editMe(this.form).then((response) => {
              this.$store.commit("user/SET_AVATAR", this.form.avatarUrl);
              this.$notify({
                title: "成功",
                message: "保存成功！",
                type: "success",
              });
            });
          }
          break;
        //2、改变密码
        case "changePwdForm":
          {
            this.$refs[type].validate(valid => {
              if (valid) {
                if (this.changePwdForm.newPwd1 != this.changePwdForm.newPwd2) {
                  this.$notify.error({
                    title: "警告",
                    message: "两次输入密码不一致"
                  });
                  return false;
                }
                if (this.changePwdForm.oldPwd == this.changePwdForm.newPwd2) {
                  this.$notify.error({
                    title: "警告",
                    message: "新密码不能和旧密码一致"
                  });
                  return false;
                }
                var params = new URLSearchParams();
                params.append("oldPwd", this.changePwdForm.oldPwd);
                params.append("newPwd", this.changePwdForm.newPwd1);
                this.$store.dispatch('app/setLoading', true);
                changePwd(params).then(response => {
                    this.$notify({
                      title: "成功",
                      message: response.data,
                      type: "success"
                    });
                    this.cancel(type);
                });
              } else {
                return false;
              }
            });
          }
          break;
      }
    },
  },
};
</script>
